<script setup lang="ts">
import { ArrowLeftBold, Edit, RefreshRight, Plus, Delete, Check, Close } from '@element-plus/icons-vue'
import DefaultAvatar from '@/area/common/components/DefaultAvatar.vue';
import RoleDetailPermit from '@/area/identity/components/RoleDetailPermit.vue';
import RoleDetailMember from '@/area/identity/components/RoleDetailMember.vue';
import { inject, onMounted, ref } from 'vue';
import { type IdentityHttpService, type Role, ResponseStatus } from '../service/identity-http.service';
import { ElMessage, ElMessageBox } from 'element-plus';

var httpService = inject<IdentityHttpService>('IdentityHttpService');

const props = defineProps({
	roleId: Number,
});

const emit = defineEmits<{
  (e: 'backClick') : void
}>();

onMounted(() => {
  loadDataById();
  memberComponentRef.value?.loadMemberList();
});

const queryString = ref('');

const permitComponentRef = ref<any>(null);
const memberComponentRef = ref<any>(null);

function refreshData() {
  loadDataById();
  memberComponentRef.value?.loadMemberList();
  permitComponentRef.value?.loadPermitTree();
}

//#region ---- Role detail above start ----
//Load table data
const roleDetail = ref<Role>();
const roleDetailLoading = ref(false);
function loadDataById() {
  roleDetailLoading.value = true;
  httpService?.apiRoleGetDetail(props.roleId).then(result => {
    roleDetailLoading.value = false;
    roleDetail.value = result;
  });
}

//Modify role name part
const roleName = ref('');
const roleNameEditing = ref(false);
const roleNameLoading = ref(false);
function startModifyRoleName() {
  roleName.value = roleDetail.value?.name??'';
  roleNameEditing.value = true;
}
function saveRoleName() {
  if(roleName.value == '') {
    ElMessage({ type: 'warning', message: '角色名不能为空' });
    return;
  }

  roleNameLoading.value = true;
  httpService?.apiRoleModify(props.roleId, roleName.value, roleDetail.value?.description).then(result => {
    roleNameLoading.value = false;
    if(result.status == ResponseStatus.Success) {
      roleDetail.value!.name = roleName.value;
      roleNameEditing.value  = false;
      ElMessage({ type: 'success', message: result.message });
    } else {
      ElMessage({ type: 'warning', message: result.message });
    }
  })
}

//Modify role description part
const roleDes = ref('');
const roleDesEditing = ref(false);
const roleDesLoading = ref(false);
function startModifyRoleDescription() {
  roleDes.value = roleDetail.value?.description??'';
  roleDesEditing.value = true;
}
function saveRoleDescription() {
  roleDesLoading.value = true;
  httpService?.apiRoleModify(props.roleId, roleDetail.value?.name, roleDes.value).then(result => {
    roleDesLoading.value = false;
    if(result.status == ResponseStatus.Success) {
      roleDetail.value!.description = roleDes.value;
      roleDesEditing.value  = false;
      ElMessage({ type: 'success', message: result.message });
    } else {
      ElMessage({ type: 'warning', message: result.message });
    }
  })
}

//delete role part
const deleteRoleLoading = ref(false);
function deleteRole() {
  ElMessageBox.confirm(
    '确认要删除该角色吗？',
    '删除角色',
    { confirmButtonText: 'OK', cancelButtonText: 'Cancel', type: 'warning' }
  ).then(() => {
    deleteRoleLoading.value = true;
    httpService?.apiRoleDelete(props.roleId).then(result => {
      deleteRoleLoading.value = false;
      if (result.status == ResponseStatus.Success) {
        ElMessage({ type: 'success', message: result.message });
        emit('backClick');
      } else {
        ElMessage({ type: 'warning', message: result.message });
      }
    });
  });
}
//#endregion ---- Role detail above end ----

//根据tab页切换工具栏按钮
const selectedTagIdenx = ref('Member');
const showMemberToolbar = ref(true);
const showPermitToolbar = ref(false);
function onTabChange(tabName: string) {
  if(tabName == "Member") {
    showMemberToolbar.value = true;
    showPermitToolbar.value = false;
    memberComponentRef.value?.loadMemberList();
  } else {
    permitComponentRef.value?.loadPermitTree();
    showMemberToolbar.value = false;
    showPermitToolbar.value = true;
  }
}

const permitEditMode = ref(false);
</script>

<template>
<div class="common-toolbar">
  <el-button :icon="ArrowLeftBold" @click="$emit('backClick')">返回</el-button>
  <b style="margin-left: 12px;line-height: 30px;color: #FFF;">角色管理 / {{ roleDetail?.name }}</b>
  <div style="display: inline;flex-grow: 1;"></div>
  <el-button v-if="showMemberToolbar" :icon="Plus" @click="memberComponentRef.showAddMemberDialog()">添加成员</el-button>
  <el-button v-if="showPermitToolbar" :icon="Edit" @click="permitEditMode = true">配置通行证</el-button>
  <el-button :icon="RefreshRight" @click="refreshData()">刷新</el-button>
  <el-input v-model="queryString" @blur="refreshData()" style="width: 220px;margin-left: 12px;" placeholder="Search" />
</div>

<div class="role-name-box">
  <el-skeleton animated v-if="roleDetailLoading"
    style="--el-skeleton-circle-size: 36px;flex-basis: 48px;margin-right: 8px;">
    <template #template>
      <el-skeleton-item variant="circle" />
    </template>
  </el-skeleton>
  <el-skeleton animated v-if="roleDetailLoading"
    style="--el-font-size-small: 24px;flex-basis: 260px;margin-right: 12px;">
    <template #template>
      <el-skeleton-item variant="text" />
    </template>
  </el-skeleton>
  <el-skeleton animated v-if="roleDetailLoading"
    style="--el-font-size-small: 24px;flex-basis: 260px;">
    <template #template>
      <el-skeleton-item variant="text" />
    </template>
  </el-skeleton>

  <DefaultAvatar :name="roleDetail?.name" v-if="!roleDetailLoading"/>
  <div v-if="roleNameEditing" class="role-editor">
    <el-input v-model="roleName" style="width: 220px;" />
    <el-button :icon="Check" :loading="roleNameLoading" @click="saveRoleName()"></el-button>
    <el-button :icon="Close" @click="roleNameEditing = false"></el-button>
  </div>
  <span v-if="!roleNameEditing && !roleDetailLoading" class="role-name">{{ roleDetail?.name }}</span>
  <el-icon v-if="!roleNameEditing && !roleDetailLoading" class="edit-icon" @click="startModifyRoleName()"><Edit /></el-icon>

  <div v-if="roleDesEditing" class="role-editor">
    <el-input v-model="roleDes" style="width: 280px;" />
    <el-button :icon="Check" :loading="roleDesLoading" @click="saveRoleDescription()"></el-button>
    <el-button :icon="Close" @click="roleDesEditing = false"></el-button>
  </div>
  <span v-if="!roleDesEditing && !roleDetailLoading" class="role-des">{{ roleDetail?.description == '' ? '请在此处添加描述' : roleDetail?.description }}</span>
  <el-icon v-if="!roleDesEditing && !roleDetailLoading" class="edit-icon" @click="startModifyRoleDescription()"><Edit /></el-icon>

  <div style="flex-grow: 1;"></div>
  <el-button :icon="Delete" :loading="deleteRoleLoading" @click="deleteRole()">删除角色</el-button>
</div>

<div style="padding: 0 12px;">
  <el-tabs v-model="selectedTagIdenx" @tab-change="onTabChange($event)">
    <el-tab-pane name="Member" label="成员">
      <RoleDetailMember ref="memberComponentRef" :role-id="props.roleId" :query-string="queryString"/>
    </el-tab-pane>
    <el-tab-pane label="通行证">
      <RoleDetailPermit ref="permitComponentRef" :role-detail="roleDetail" :query-string="queryString"
        :edit-mode="permitEditMode" @edit-mode-close="permitEditMode = false"/>
    </el-tab-pane>
  </el-tabs>
</div>

</template>

<style lang="scss">
@use '../../../assets/variable.scss' as variable;

.role-name-box {
  display: flex;
  align-items: center;
  padding: 8px 12px;

  .role-editor {
    display: inline;
    margin: 0px 8px;

    .el-input__wrapper {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    button {
      margin: 0;
      border-left: 0;
      border-radius: 0;

      &:hover {
        border-color: rgb(220, 223, 230);
      }

      &:active {
        border-color: rgb(220, 223, 230);
      }
    }

    button:last-child {
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }
  }
  
  .role-name {
    margin: 0 8px 0 12px;
    font-size: 18px;
    font-weight: 500;
    color: variable.$text0;
  }

  .role-des {
    margin: 0 8px 0 24px;
    font-size: 16px;
    color: variable.$text2;
  }

  .edit-icon {
    font-size: 16px;
    color: variable.$text2;
    cursor: pointer;

    &:hover {
      color: variable.$primary0;
    }

    &:active {
      color: variable.$primary-1;
    }
  }
}

.autocomplete-card {
  display: flex;
  padding: 4px 8px;

  .card-name {
    margin-right: 12px;
    font-size: 20px !important;
    line-height: 20px;
    color: variable.$text0;
  }

  .card-other {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    color: variable.$text2;

    i {
      margin-right: 2px;
    }
  }
}

.el-autocomplete-suggestion li {
  padding: 0px 8px;
}
</style>